<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webuploaderDemo</title>
<link rel="stylesheet" href="staticresource/layui/css/layui.css">
<link rel="stylesheet" href="staticresource/webuploader/upload.media.css">
<link rel="stylesheet" href="staticresource/css/style.css">
<script src="staticresource/js/jquery-3.2.1.min.js"></script>
<script src="staticresource/layui/layui.all.js"></script>
<script src="staticresource/webuploader/webuploader.js"></script>
<script type="text/javascript">
var base = "${pageContext.request.contextPath}"
var element;
var layer;
$(function(){
	layui.use(['layer','element','code'], function(){
		  element = layui.element;
		  layer = layui.layer;
		  layui.code({
			  elem: 'pre', //默认值为.layui-code
			  encode: true, //是否转义html标签。默认不开启
			  about: false
		});
	});
	
	var uploadFile = $("#uploadFile");
	// 实例化,
	var uploadFile_Web_Uploader = WebUploader.create({ 
        pick: {
            id: uploadFile,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label: title,
        },
        server: base+"/file/uploadFile",
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        auto:true
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	uploadFile_Web_Uploader.on('uploadSuccess',function(file,response){
		layer.msg("简单渲染上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	
	var restrictions_btn = $("#restrictions");
	var restrictions = WebUploader.create({ 
		
        pick: {
            id: restrictions_btn,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label: title,
        },
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        auto:true
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	restrictions.on('uploadSuccess',function(file,response){
		layer.msg("简单渲染上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	restrictions.on("error",function(type){
		console.log(type);
		if("Q_TYPE_DENIED"==type){
			layer.msg("只能上传gif,jpg,jpeg,bmp,png格式文件");
		}
	}) 
	
	
	
	
	var uploadImg_btn = $("#uploadImg");
	var uploadImg = WebUploader.create({ 
		
        pick: {
            id: uploadImg_btn,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label: title,
        },
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        auto:true,
        
        //压缩图片，如果图片尺寸超过设置的尺寸，会自动压缩图片，必要时会裁剪
        compress:{
			width: 600,
			height: 600,
			
			// 图片质量，只有type为`image/jpeg`的时候才有效。
			quality: 90,
			
			// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
			allowMagnify: false,
			
			// 是否允许裁剪
			crop: false,
			
			// 是否保留头部meta信息。
			preserveHeaders: true,
			
			// 如果发现压缩后文件大小比原来还大，则使用原来图片
			// 此属性可能会影响图片自动纠正功能
			noCompressIfLarger: false,
			
			// 单位字节，如果图片大小小于此值，不会采用压缩。512k  512*1024，如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩
			compressSize: 0
        }
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	uploadImg.on('uploadSuccess',function(file,response){
		layer.msg("上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	uploadImg.on("error",function(type){
		console.log(type);
		if("Q_TYPE_DENIED"==type){
			layer.msg("只能上传gif,jpg,jpeg,bmp,png格式文件");
		}
	}) 
	
	
	
	
	
	var batchUpload_btn = $("#batchUpload");
	var batchUpload = WebUploader.create({ 
		
        pick: {
            id: batchUpload_btn,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label : title, 官方建议采用 innerHTML 代替
            //innerHTML : title,
            multiple :true //开起同时选择多个文件能力。
        },
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        auto:true,
        
        //压缩图片，如果图片尺寸超过设置的尺寸，会自动压缩图片，必要时会裁剪
        compress:{
			width: 600,
			height: 600,
			
			// 图片质量，只有type为`image/jpeg`的时候才有效。
			quality: 90,
			
			// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
			allowMagnify: false,
			
			// 是否允许裁剪
			crop: false,
			
			// 是否保留头部meta信息。
			preserveHeaders: true,
			
			// 如果发现压缩后文件大小比原来还大，则使用原来图片
			// 此属性可能会影响图片自动纠正功能
			noCompressIfLarger: false,
			
			// 单位字节，如果图片大小小于此值，不会采用压缩。512k  512*1024，如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩
			compressSize: 0,
			fileNumLimit : 10,//验证文件总数量, 超出则不允许加入队列,默认值：undefined,如果不配置，则不限制数量
			fileSizeLimit : 10*1024*1024, //1kb=1024*1024,验证文件总大小是否超出限制, 超出则不允许加入队列。
			fileSingleSizeLimit :1*1024*1024 //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        },
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	batchUpload.on('uploadSuccess',function(file,response){
		layer.msg("上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	batchUpload.on("error",function(type,file){
		console.log(type);
		if (info=="Q_TYPE_DENIED"){
		    layer.msg("只能上传gif,jpg,jpeg,bmp,png格式文件");
	    }else if(info=="Q_EXCEED_SIZE_LIMIT"){
	    	layer.msg("所有的文件大小总和不能超过10M");
	    }else if(info=='F_EXCEED_SIZE'){
	    	layer.msg("单个文件大小不能超过1M");
	    }else if(info=='Q_EXCEED_NUM_LIMIT'){
	    	layer.msg(typeName+"最多只能上传10个");
	    }else if(info=='F_DUPLICATE'){
	    	layer.msg(file.name+"已经在上传队列，请勿重复上传");
	    }else{
	    	layer.msg("上传出错");
	    }
	}) 
	/***********************批量分片上传断点续传秒传****************************/
	
	
	
	
	
	
	
	
	
	
})
</script>
</head>
<body>
<div class="layui-container">
<fieldset class="layui-elem-field">
  <legend>百度webUploaderDemo</legend>
  <div class="layui-field-box">
  <h3>
  WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。
  </h3>
  
  
 <span class="focus">百度webUploader传送门：<a href="http://fex.baidu.com/webuploader/" target="_bank">http://fex.baidu.com/webuploader/</a></span><br>
   之前自己在做产品到时候遇到超大文件上传，公司前端人员能力有限，只会表单提交。。。。醉醉的，不说这个了，说起来就伤心，想骂人啊。
   没办法功能还是要完成的，那只能猴子（程序猿）上了，查了好多资料，最后定下来使用webuploader，基本上传官方文档写的挺详细。
  <br> 但是<span class="focus">划重点了：</span>到高级上传，就很笼统了，踩了不少坑。
   这里面还有一个bug（批量上传的时候暂停的单个文件会报错，而且获取不到文件状态），请各位帮忙看看，不知道是我写的有问题，还是。。。反正比较操蛋。
  <br>
 <span class="focus"> 最后声明，前端大神请帮忙封装一下这个，我只是个java程序猿，
 js也不是很专业，自己封装的比较臃肿，不要嘲讽，如果你觉得看不上，出门左拐。</span><br>
 
 
 <span>
  限制文件类型，怎么写mimeTypes请出门参考  w3c  MIME手册,传送门 <a target="_bank" href="http://www.w3school.com.cn/media/media_mimeref.asp">http://www.w3school.com.cn/media/media_mimeref.asp</a>
  </span><br>
  
  
  
  </div>
  
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">普通按钮点击上传</li>
    <li>拖拽上传</li>
    <li>复制粘贴上传</li>
    <li>拖拽+按钮+复制粘贴</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
	  <div class="layui-row">
		<div class="layui-col-md12">
			<blockquote class="layui-elem-quote">
				<div class="layui-btn-container">
					
				</div>
			</blockquote>
		</div>   
	  </div>
	  <div class="row">
		<fieldset class="layui-elem-field layui-field-title">
		  <legend>普通上传</legend>
		  <div class="layui-field-box">
		  <blockquote class="layui-elem-quote layui-quote-nm">
		  普通上传包括：最简单渲染,限定文件类型,开启/关闭多选,是否自动上传,限制文件个数,
		  限制单个文件大小,限制所有文件大小,批量上传
		  </blockquote>
			   	<a class="layui-btn layui-btn-warm layui-btn-sm" id="uploadFile">
				  简单上传按钮
				</a>
				<pre class="layui-code" lay-title="简单渲染" lay-height="" lay-skin="" lay-encode="">
				
				<a class="layui-btn layui-btn-warm layui-btn-sm" id="demo1">
				  简单上传按钮
				</a>
				var demo1 = $("#demo1");//上传实例dom
				
				
				// 实例化demo_Web_Uploader这个名字随便叫啊，我自定义的，页面上实例太多啦，
				var demo_Web_Uploader = WebUploader.create({
				
			        pick: {
			            id: demo1, //指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
			            label: "上传文件",//如果上传实例是个空dom，需要设置一下按钮的显示文字 
			        },
			        
			        server: base+"/file/uploadFile",//上传服务端路径
			        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
			        auto:true//是否自动上传
				});
				
				
				//当文件上传成功时触发。
				//file {File} File对象
				// response {Object}服务端返回的数据
				demo_Web_Uploader.on('uploadSuccess',function(file,response){
						console.log(file);
						console.log(response);
				})
				</pre>
				
				<a class="layui-btn layui-btn-sm" id="restrictions">
				  限制上传文件类型
				</a>
				<pre>
				
				var restrictions_btn = $("#restrictions");
	var restrictions = WebUploader.create({ 
		
        pick: {
            id: restrictions_btn, //指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label: title,
        },
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        auto:true
	});
		//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
		restrictions.on('uploadSuccess',function(file,response){
		layer.msg("简单渲染上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	restrictions.on("error",function(type){
		console.log(type);
		if("Q_TYPE_DENIED"==type){
			alert("只能上传gif,jpg,jpeg,bmp,png格式文件");
		}
	}) 
				</pre>
				
				<a class="layui-btn layui-btn-normal layui-btn-sm" id="uploadImg">
					  <i class="layui-icon">&#xe60d;</i>指定图片尺寸，设定大小尺寸，超过自动压缩（600*600为例）
					</a>
				<pre>
				
				<a class="layui-btn layui-btn-normal layui-btn-sm" id="uploadImg">
					  指定图片尺寸，设定大小尺寸，超过自动压缩（600*600为例）
					</a>
				var uploadImg_btn = $("#uploadImg");
	var uploadImg = WebUploader.create({ 
		
        pick: {
            id: uploadImg_btn, //指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label: title,
        },
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        auto:true,
        
        //压缩图片，如果图片尺寸超过设置的尺寸，会自动压缩图片，必要时会裁剪
        compress:{
			width: 600,
			height: 600,
			
			// 图片质量，只有type为`image/jpeg`的时候才有效。
			quality: 90,
			
			// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
			allowMagnify: false,
			
			// 是否允许裁剪
			crop: false,
			
			// 是否保留头部meta信息。
			preserveHeaders: true,
			
			// 如果发现压缩后文件大小比原来还大，则使用原来图片
			// 此属性可能会影响图片自动纠正功能
			noCompressIfLarger: false,
			
			// 单位字节，如果图片大小小于此值，不会采用压缩。
			//如果想让超过512k的才会被压缩 设置为  512*1024
			//如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩
			compressSize: 0
        }
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	uploadImg.on('uploadSuccess',function(file,response){
		layer.msg("上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	uploadImg.on("error",function(type){
		console.log(type);
		if("Q_TYPE_DENIED"==type){
			layer.msg("只能上传gif,jpg,jpeg,bmp,png格式文件");
		}
	}) 
				</pre>	
				<a class="layui-btn layui-btn-warm layui-btn-sm" id="batchUpload">
				  <i class="layui-icon">&#xe655;</i>批量上传(指定数量)
				</a>
				<pre>
				
				<a class="layui-btn layui-btn-warm layui-btn-sm" id="batchUpload">
				 批量上传(指定数量)
				</a>
				var batchUpload_btn = $("#batchUpload");
	var batchUpload = WebUploader.create({ 
		
        pick: {
            id: batchUpload_btn,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
            //label : title, 官方建议采用 innerHTML 代替
            //innerHTML : title,
            multiple :true //开起同时选择多个文件能力。
        },
        flash:base+'/staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
        accept:{
        	title: 'Images',//字符串类型，文字描述
            extensions: 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
            mimeTypes: 'image/*'//多个用逗号分割,怎么不知道咋写的，参考w3c  MIME 参考手册,传送门 http://www.w3school.com.cn/media/media_mimeref.asp
        },
        server: base+"/file/uploadFile",
        auto:true,
        
        //压缩图片，如果图片尺寸超过设置的尺寸，会自动压缩图片，必要时会裁剪
        compress:{
			width: 600,
			height: 600,
			
			// 图片质量，只有type为`image/jpeg`的时候才有效。
			quality: 90,
			
			// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
			allowMagnify: false,
			
			// 是否允许裁剪
			crop: false,
			
			// 是否保留头部meta信息。
			preserveHeaders: true,
			
			// 如果发现压缩后文件大小比原来还大，则使用原来图片
			// 此属性可能会影响图片自动纠正功能
			noCompressIfLarger: false,
			
			// 单位字节，如果图片大小小于此值，不会采用压缩。512k  512*1024，如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩
			compressSize: 0,
			fileNumLimit : 10,//验证文件总数量, 超出则不允许加入队列,默认值：undefined,如果不配置，则不限制数量
			fileSizeLimit : 10*1024*1024, //1kb=1024*1024,验证文件总大小是否超出限制, 超出则不允许加入队列。
			fileSingleSizeLimit :1*1024*1024 //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        },
	});
	//当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
	batchUpload.on('uploadSuccess',function(file,response){
		layer.msg("上传完成，服务端返回信息请按F12,看控制台：");
		console.log(file);
		if(response.success){
			console.log(response);
		}
	})
	//错误类型。文件验证不通过时触发
	//错误类型说明：Q_EXCEED_NUM_LIMIT 上传文件超过限制的数量
	//Q_EXCEED_SIZE_LIMIT文件总大小超出限制
	//Q_TYPE_DENIED 当文件类型不对
	batchUpload.on("error",function(type,file){
		console.log(type);
		if (info=="Q_TYPE_DENIED"){
		    alert("只能上传gif,jpg,jpeg,bmp,png格式文件");
	    }else if(info=="Q_EXCEED_SIZE_LIMIT"){
	    	alert("所有的文件大小总和不能超过10M");
	    }else if(info=='F_EXCEED_SIZE'){
	    	alert("单个文件大小不能超过1M");
	    }else if(info=='Q_EXCEED_NUM_LIMIT'){
	    	alert(typeName+"最多只能上传10个");
	    }else if(info=='F_DUPLICATE'){
	    	alert(file.name+"已经在上传队列，请勿重复上传");
	    }else{
	    	alert("上传出错");
	    }
	}) 
				
				</pre>
			
				<a href="index2.jsp" class="layui-btn layui-btn-danger layui-btn-sm" id="batchWebUpload">
				  <i class="layui-icon">&#xe857;</i>划重点，多选，分片批量上传+断点续传
				</a>
				<pre></pre>
		  </div>
		</fieldset>
	  </div>
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
  </div>
</div>
</div>
</body>
</html>
